<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${productTypeName}"></title>
</head>
<body>
<!--通用头部-->
<div th:replace="../templates/head"></div>

<section class="ftco-section ftco-section-2 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-9 text-center">
                <h2 class="heading-section mb-4 pb-md-3" th:text="${productTypeName}"></h2>
            </div>
        </div>
        <div th:with="colSize=${2}, rowSize=${productList.size()/colSize}, rowSize=${(productList.size()%colSize==0 ? rowSize : (rowSize+1))}">
            <div class="row mt-4" th:if="${productList.size() gt 0}" th:each="rowIdx:${#numbers.sequence(1, rowSize)}">
                <div class="col-md-6" th:each="colIdx:${#numbers.sequence(1,colSize)}">
                    <div th:with="idx=${(rowIdx-1)*colSize+colIdx-1}, item=${idx<productList.size() ? productList[idx] : null}">
                        <div th:if="${item ne null}">
                            <div class="card text-center">

                                <img th:src="${item.imgUrl}" class="card-img-top" alt="..." height="400px">
                                <div class="card-body">
                                    <h5 class="card-title title" th:text="${item.title}"></h5>
                                    <p class="card-body" th:text="${item.name}"></p>
                                    <a th:href="${'/product/info/' + item.id}">
                                        <button type="button" class="btn btn-primary btn-sm">查看更多</button>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="divider"></div>
</section>
<div th:replace="footer::footer"></div>
</body>
</html>